<template>
  <div class="index">
      <!-- 频道列表 -->
    <van-tabs v-model="curIndex">
      <van-tab
      v-for="item in channel"
      :key="item.id"
      :title="item.name"
       >
       <!-- 每一个哦频道对应一个文章列表 只有选中了才会进行加载 -->
         <aritcle-list :channel ='item' @showMoreAction = "isShow"></aritcle-list>
       </van-tab>
    </van-tabs>
     <!-- 管理弹层得按钮 -->
    <div v-if="$store.getters.isLogin" class="bar-btn" @click="isShowChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>
    <!-- 更多操作 弹层 -->
     <!-- 在子组件中监听不感兴趣 -->
    <van-popup v-model="isSHowMoreAction" :style="{ width: '80%' }">
      <more-action
      ref="refMoreAction"
      @dislike = "hDislike"
      @report="hReport"
      ></more-action>
    </van-popup>
    <!-- 频道管理弹层 -->
    <van-action-sheet v-model="isShowChannelEdit" title="标题" >
      <channel-edit :channels = "channel"
      @updateCurrentIndex = "hUpdateCurrentIndex"
      @updateCurChannel = "hupdateCurChannel"
      :curIndex = "curIndex"
      ></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
import AritcleList from './aritcleList.vue'
import MoreAction from './moreAction'
import ChannelEdit from './channelEdit'
// 调用举报和不喜欢接口
import { dislike, report } from '@/api/article.js'
export default {
  name: 'index-name',
  components: {
    AritcleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
    //   active:
      channel: [],
      isSHowMoreAction: false, // 是否显示弹层
      articleId: null, // 子组件传过来的id
      isShowChannelEdit: false, // 是否显示频道弹层
      curIndex: '' // 当前选中频道的序号
    }
  },
  computed: {
    // 获取当前选中文章的id
    cChannelID () {
      return this.channel[this.curIndex].id
    }
  },
  created () {
    this.getChannel()
  },
  methods: {
    async getChannel () {
      const result = await getChannels()
      console.log('频道数据', result)
      this.channel = result.data.data.channels
    },
    // 是否显示弹层
    isShow (articleId) {
      // 显示弹层
      this.isSHowMoreAction = true
      // 保存文章编号
      this.articleId = articleId
      // 重置更对操作中isReport的值 避免下次打开弹窗还属于状态二
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    // 处理不感兴趣时间
    async hDislike () {
      console.log('不感兴趣点击，文章id为', this.articleId)
      // 调用接口删除文章
      const result = await dislike(this.articleId)
      console.log('退出弹层', result)
      // 退出弹层
      this.isSHowMoreAction = false
      // 通知文章列表去删除这个选中的文章
      this.$eventBus.$emit('delArticle',
        {
          articleId: this.articleId,
          channelId: this.cChannelID
        })
    },
    // 处理举报
    async hReport (typeValue) {
      // console.log('处理举报', typeValue)
      // 发送请求
      const result = await report(this.articleId, typeValue)
      console.log('处理举报', result)
      // 关闭弹窗
      this.isSHowMoreAction = false
      // 通知文章列表去删除本地文章
      this.$eventBus.$emit('delArticle',
        {
          articleId: this.articleId,
          channelId: this.cChannelID
        })
    },
    // 频道跳转
    hupdateCurChannel (idx) {
      console.log('频道跳转', idx)
      // 频道跳转
      this.curIndex = idx
      // 关闭弹窗
      this.isShowChannelEdit = false
    },
    // 修复bug
    hUpdateCurrentIndex (idx) {
      this.curIndex = idx
    }
  }

}
</script>

<style lang="less" scoped>
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
